<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>高校图书馆读者后台</title>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <script src="https://unpkg.com/element-plus/dist/index.full.global.js"></script>
  <!-- ICONS要在你代码前引入！ -->
  <script src="https://unpkg.com/@element-plus/icons-vue/dist/index.full.js"></script>
  <style>
      body {
          margin: 0;
          padding: 0;
          background: #f0f2f5;
          font-family: 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
      }
      .reader-dashboard {
          min-height: 100vh;
          background: #f0f2f5;
      }
      .header {
          background: #409eff;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 60px !important;
          padding: 0 32px;
      }
      .header-left {
          display: flex;
          align-items: center;
      }
      .logo {
          width: 40px;
          height: 40px;
          background: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 18px;
      }
      .logo-icon {
          color: #409eff;
          font-size: 24px;
      }
      .system-title {
          font-size: 22px;
          font-weight: bold;
          color: #fff;
          letter-spacing: 2px;
      }
      .header-right {
          display: flex;
          align-items: center;
          gap: 12px;
      }
      .reader-name {
          color: #fff;
          font-size: 15px;
          font-weight: bold;
          margin-left: 10px;
          margin-right: 6px;
      }
      .el-aside.sidemenu {
          padding: 0;
          background: #304156;
          color: #fff;
          border-right: 1px solid #2d3a4b;
          min-height: calc(100vh - 60px);
      }
      .el-menu-vertical-demo {
          border-right: none;
          background: #304156;
      }
      .el-menu-vertical-demo .el-menu-item {
          font-size: 16px;
          font-family: Arial, sans-serif;
          height: 52px;
          line-height: 52px;
          transition: background 0.2s;
      }
      .el-menu-vertical-demo .el-menu-item.is-active {
          background: #2d3a4b !important;
          font-weight: bold;
      }
      .menu-icon {
          margin-right: 12px;
      }
      .main-area {
          background: #f1f4f9;
          min-height: calc(100vh - 60px);
          padding: 30px 40px 40px 40px;
      }
      .breadcrumb {
          color: #909399;
          font-size: 15px;
          margin-bottom: 14px;
      }
      .main-card {
          margin-top: 8px;
          padding: 25px 32px 18px 32px;
          border-radius: 22px;
          box-shadow: none;
          border: 1.2px solid #ebeef5;
          background: #fff;
      }
      .welcome-title {
          font-size: 20px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 30px;
      }
      .info-panels {
          display: flex;
          flex-direction: row;
          gap: 22px;
      }
      .info-card {
          min-width: 220px;
          padding: 24px 18px;
          border-radius: 18px;
          background: #f5f7fa;
          border: 1.2px solid #ebeef5;
          display: flex;
          align-items: center;
      }
      .profile-card {
          flex: 1;
          max-width: 320px;
          gap: 18px;
      }
      .profile-fields {
          margin-left: 16px;
          font-size: 15px;
          color: #606266;
          display: flex;
          flex-direction: column;
          gap: 5px;
      }
      .records-card {
          flex: 1.2;
          max-width: 400px;
          flex-direction: column;
          align-items: flex-start;
          padding-left: 22px;
      }
      .card-title {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 8px;
      }
      .borrow-row {
          font-size: 15px;
          color: #606266;
          line-height: 1.7;
      }
      .stats-row {
          margin-top: 12px;
          display: flex;
          flex-direction: row;
          gap: 32px;
          align-items: flex-start;
      }
      .stat-card {
          min-width: 180px;
          padding: 24px 12px 8px 22px;
          border-radius: 14px;
          background: #f5f7fa;
          border: 1.2px solid #ebeef5;
      }
      .stat-label {
          color: #606266;
          font-weight: bold;
          font-size: 15px;
          margin-bottom: 12px;
      }
      .stat-value {
          font-size: 24px;
          font-weight: bold;
          margin-top: 10px;
          color: #222;
      }
      .stat-value .stat-unit {
          font-size: 15px;
          margin-left: 4px;
          font-weight: normal;
          color: #606266;
      }
      .stat-value.blue {
          color: #409eff;
      }
      .stat-value.green {
          color: #67c23a;
      }
      .stat-value.orange {
          color: #e6a23c;
      }
      .main-hint {
          margin-top: 32px;
          font-size: 13.5px;
          color: #909399;
          letter-spacing: 1.3px;
      }
  </style>
</head>
<body>
<div id="app"></div>
<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const activeMenu = ref("1");
            return { activeMenu }
        },
        // 必须这样写（用window.ElementPlusIconsVue，且判空！）
        components: {
            ElIconArrowDown: window.ElementPlusIconsVue ? window.ElementPlusIconsVue.ArrowDown : {}
        },
        template: `
          <el-container class="reader-dashboard">
            <el-header class="header" height="60px">
              <div class="header-left">
                <div class="logo"><span class="logo-icon">📚</span></div>
                <span class="system-title">高校图书馆读者后台</span>
              </div>
              <div class="header-right">
                <el-avatar :size="34" style="background:#67c23a;color:#fff;font-weight:bold">U</el-avatar>
                <span class="reader-name">读者A</span>
                <el-icon><el-icon-arrow-down/></el-icon>
              </div>
            </el-header>
            <el-container>
              <el-aside width="180px" class="sidemenu">
                <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#304156" text-color="#fff" active-text-color="#409eff">
                  <el-menu-item index="1"><span class="menu-icon">🏠</span> 个人中心</el-menu-item>
                  <el-menu-item index="2"><span class="menu-icon">📖</span> 借阅记录</el-menu-item>
                  <el-menu-item index="3"><span class="menu-icon">❤️</span> 我的预约</el-menu-item>
                  <el-menu-item index="4"><span class="menu-icon">🔑</span> 修改密码</el-menu-item>
                  <el-menu-item index="5"><span class="menu-icon">❓</span> 常见问题</el-menu-item>
                  <el-menu-item index="6"><span class="menu-icon">🚪</span> 退出登录</el-menu-item>
                </el-menu>
              </el-aside>
              <el-main class="main-area">
                <div class="breadcrumb">首页 / 个人中心</div>
                <el-card class="main-card" shadow="never">
                  <div class="welcome-title">欢迎你，读者A！</div>
                  <div class="info-panels">
                    <el-card class="info-card profile-card" shadow="never">
                      <el-avatar size="48" style="background:#67c23a;font-size: 24px;">A</el-avatar>
                      <div class="profile-fields">
                        <div>姓名：张三</div>
                        <div>学号：2021112233</div>
                        <div>手机号：13888888888</div>
                      </div>
                    </el-card>
                    <el-card class="info-card records-card" shadow="never">
                      <div class="card-title">最近借阅信息</div>
                      <div class="borrow-row">2025-04-15 《Python从入门到实践》 归还</div>
                      <div class="borrow-row">2025-04-10 《Java编程思想》 借出</div>
                    </el-card>
                  </div>
                  <el-divider style="margin: 20px 0 20px 0"/>
                  <div class="stats-row">
                    <el-card class="stat-card" shadow="hover">
                      <div class="stat-label">进行中预约</div>
                      <div class="stat-value blue">2 <span class="stat-unit">条</span></div>
                    </el-card>
                    <el-card class="stat-card" shadow="hover">
                      <div class="stat-label">目前借阅</div>
                      <div class="stat-value green">3 <span class="stat-unit">本</span></div>
                    </el-card>
                    <el-card class="stat-card" shadow="hover">
                      <div class="stat-label">历史累计借阅</div>
                      <div class="stat-value orange">35 <span class="stat-unit">本</span></div>
                    </el-card>
                  </div>
                  <div class="main-hint">
                    如有问题请联系图书馆管理员，或查看侧边栏常见问题～
                  </div>
                </el-card>
              </el-main>
            </el-container>
          </el-container>
        `
    }).mount('#app');
</script>
</body>
</html>